<template>
  <div class="table-container-inner">
    <div class="table-height">
      <el-table
        :height="'100%'"
        v-loading="loading"
        :data="dataList"
        border
        size="medium"
        @selection-change="handleSelectionChange"
        :cell-style="cellStyle"
        class="table-fixed"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          v-for="item in viewData"
          :key="item.ctTitle"
          :min-width="item.ctWide.indexOf('%') > 0 ? item.ctWide: 0"
          :width="item.ctWide.indexOf('%') > 0 ? 0: item.ctWide"
          :prop="item.ctName"
          :label="item.ctTitle"
          :align="item.ctAlign"
          header-align="center"
          show-overflow-tooltip
          :scoped-slot="labelHead"
        ></el-table-column>
        <el-table-column
          label="操作"
          :show-overflow-tooltip="false"
          align="center"
          class-name="small-padding fixed-width"
          width="120"
          v-if="showQueryBtn"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              icon="el-icon-postcard"
              @click="handleQuery(scope.row)"
              title="查看"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { tableData } from './tableData'
import store from '@/store/index'
import { getFunNo } from '@/utils/party'

export default {
  name: 'biDynamicList',
  props: {
    // 组件需要获取的值
    viewData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 查询参数
    queryParams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    showQueryBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      store: store,
      // 表格数据
      dataList: null,
      loading: true,
      // 选中数组
      ids: [],
      tableList: [],
      total: 0,
      funNo: getFunNo(this.$route),
      tableHeight: 0,
      singleStore: null,
    }
  },
  created() {
    this.singleStore = store.getters.singleStore['main' + this.funNo]
  },

  methods: {
    labelHead(h, { column, index }) {
      let l = column.label.length
      let f = 16 //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      column.minWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('div', { class: 'table-head', style: { width: '100%' } }, [
        column.label,
      ])
    },
    cellStyle(data) {
      let style = 'padding:0px;'
      if (data.columnIndex == 1) {
        if (data.row.ct_end_name && data.row.ct_end_name == '未签发') {
          style += 'color:#f95a5a;'
        } else if (data.row.ct_end_name && data.row.ct_end_name == '已签发') {
          style += 'color:#21bd21;'
        }
      }
      return style
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.ct_id)
      this.ctNames = selection
        .filter((item) => item.ct_name && item.ct_name && item.ct_name !== '')
        .map((item) => item.ct_name)
      this.ctNames = this.ctNames.join(',')
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 获取列表
    getList() {
      this.loading = true
      tableData(this.queryParams)
        .then((response) => {
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    // 查看
    handleQuery(row) {
      row.handleType = 'view'
      this.handleAction(row)
    },
    // handle 动作函数
    handleAction(row) {
      row.handleType = 'view'
      if (row.ct_fun_no == undefined) {
        row.ct_fun_no = this.funNo
      }
      const handleTypeModel = {
        funNo: this.funNo,
        handleType: row.handleType,
      }
      store.dispatch('setHandleType', handleTypeModel).then(() => {
        this.$emit('updateValue', row)
      })
      store.dispatch('openShowMaster', this.funNo)
      if (row.ct_buss_id) {
        row.ct_id = row.ct_buss_id
      }
      const subSingleStore = {
        funNo: this.funNo,
        subFunNo: row.ct_fun_no,
        oldForm: {},
        newForm: {},
        ctId: row.ct_id,
        changeForm: false,
        ifEnd: row.ct_end_name == '已签发',
      }
      // 初始化subSingleStore
      store.dispatch('createSubSingleStore', subSingleStore).then(() => {
        store.dispatch('setCtId', subSingleStore)
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep.table-head {
  font-size: 14px !important;
}
.table-container-inner {
  width: 100%;
  height: 100%;
  .table-height {
    height: calc(100% - 70px);
  }
}
::v-deep.el-table__body-wrapper {
  height: calc(100% - 44px) !important;
}
</style>
